*{margin: 0; padding: 0;}
.loading {
    color: #fff;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    width: calc(100vw - 200px);
    height: calc(100vh - 200px);
	position: relative;
    background-color: black;
    display: flex;
    justify-content: center;
    align-items: center;
	.circle-body {
		height: 500px;
		width: 500px;
		padding: 3px;
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: row;
		overflow: hidden;
		box-sizing: border-box;
		.circle {
			position: absolute;
			display: block;
			border-radius: 50%;
			border: 10px solid #fffc00;
			&:nth-child(1) {
				height: 350px;
				width: 350px;
				animation: animate1 1.5s infinite linear, borderColor 1.5s 0.2s infinite linear;
				border-width: 10px;
				opacity: 0.9;
			}
			&:nth-child(2) {
				height: calc(350px * 0.65);
				width: calc(350px * 0.65);
				animation: animate2 1.5s infinite linear, borderColor 1.5s 1s infinite linear;
				border-width: 8px;
				opacity: 0.7;
			}
			&:nth-child(3) {
				height: calc(350px * 0.45);
				width: calc(350px * 0.45);
				animation: animate3 1.5s infinite linear, borderColor 1.5s 1.5s infinite linear;
				border-width: 6px;
				opacity: 0.5;
			}
		}
	}

	.circle-loading {
		box-sizing: border-box;
		position: absolute;
		font-size: 26px;
		color: #fffc00;

		.loading__dot {
			animation: 1s loading infinite;
		}
		.loading__dot:nth-child(2) {
			animation-delay: 250ms;
		}
		.loading__dot:nth-child(3) {
			animation-delay: 500ms;
		}
	}
}

@keyframes borderColor {
	0% {
		border-color: #fffc00;
	}
	15% {
		border-color: #0fb34e;
	}
	30% {
		border-color: #0b669b;
	}
	45% {
		border-color: #4c0983;
	}
	60% {
		border-color: #a30c8f;
	}
	75% {
		border-color: #a30c39;
	}
	100% {
		border-color: #fffc00;
	}
}

@keyframes animate1 {
	0% {
		transform: rotateZ(20deg) rotateY(0deg);
	}
	100% {
		transform: rotateZ(100deg) rotateY(360deg);
	}
}
@keyframes animate2 {
	0% {
		transform: rotateZ(100deg) rotateX(0deg);
	}
	100% {
		transform: rotateZ(0deg) rotateX(360deg);
	}
}
@keyframes animate3 {
	0% {
		transform: rotateZ(100deg) rotateX(-360deg);
	}
	100% {
		transform: rotateZ(-360deg) rotateX(360deg);
	}
}

@keyframes loading {
	50% {
		color: transparent;
	}
}
.slideshow{
	height: 320px;
	width: 588px;
	margin: 0 auto;
	position: relative;
	.slideshow-img{
		width: 100%;
		height: 100%;
		position: relative;
		perspective: 1000px;
		.slideshow-item{
			background-color: rgba(000,000,000,.9);
			position: absolute;
			top: calc(50% - 150px);
			left: calc(50% - 150px);
			width: 300px;
			height: 300px;
		}

	}
	.Icon{
		font-size: 40px;
		color: #585858;
		position: absolute;
		top: 155px;
		left: 0;
		z-index: 30;
		&:hover{
			z-index: 99;
			color: #fff;
		}
	}
	.right-Icon{
		left: 580px;
	}


}